<!--
 * @Author: ZhaoChenGuang
 * @Date: 2025-01-18 14:13:37
 * @Description: 
-->
<script setup lang="ts">
import { ref } from 'vue';
import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
import { Upload, Button, message } from 'ant-design-vue';
import { companyList, uploadExcel } from '#/api/index';

const loading:any = ref(false)
const fileList:any = ref([]);
const props = defineProps({
  callbackFunc: {type:Function,default: null}
})


const [BaseForm, formApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 在label后显示一个冒号
    colon: true,
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  resetButtonOptions: { show: false },
  submitButtonOptions: { show: false },
  // handleSubmit: onSubmit,
  layout: 'horizontal',
  schema: [
    {
      component: 'DatePicker',
      fieldName: 'uploadTime',
      componentProps: {
        picker: 'month',
      },
      label: '月份',
    },
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'ApiSelect',
      // 对应组件的参数
      componentProps: {
        // 菜单接口
        api: async() =>await companyList(),
        // 菜单接口转options格式
        afterFetch: (data:any) => {
          return data.map((item:any) => ({
            label: item.name,
            value: item.id,
          }));
        },
      },
      // 字段名
      fieldName: 'companyId',
      // 界面显示的label
      label: '选择井队',
    },
    {
      component: 'Input',
      fieldName: 'file',
      label: '井队工资',
    },
  ],
});


const handleRemove = (file:any) => {
  const index = fileList.value.indexOf(file);
  const newFileList = fileList.value.slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
};

const handleChange = (file:any) => {
  fileList.value = [file.file]
};

const beforeUpload = (file:any) => {
  fileList.value = [...(fileList.value || []), file];
  if(fileList.length === 1){
    message.error('最多上传一个文件')
    return false
  }
  return true
};


const [Drawer, drawerApi] = useVbenDrawer({
  onCancel() {
    drawerApi.close();
  },
  onClosed() {
    drawerApi.setState({ overlayBlur: 0, placement: 'right' });
  },
  async onConfirm() {
    try {
      await formApi.setFieldValue('file', fileList.value[0]);
      const values = await formApi.getValues();
      const formData = new FormData();
      for (let key in values) {
        formData.append(key, values[key]);
      }
      loading.value = true
      await uploadExcel(values);
      loading.value = false
      await props.callbackFunc()
      message.success('文件上传成功');
      
      formApi.resetForm()
      fileList.value = []
      drawerApi.close();
    } catch (error) {
    
      loading.value = false
    }
  },
});

</script>

<template>
  <Drawer :loading="loading" title="上传井队工资" title-tooltip="标题提示内容">
    <BaseForm>
      <template #file="slotProps">
        <Upload
          accept=".xls, .xlsx"
          :file-list="fileList"
          :before-upload="beforeUpload"
          @remove="handleRemove"
          @change="handleChange"
          :customRequest="handleChange"
          :max-count="1"
        >
          <Button>
            <!-- <upload-outlined></upload-outlined> -->
            上传文件
          </Button>
        </Upload>
      </template>
    </BaseForm>
  </Drawer>
</template>
